<template>
  <div class="page">
    <div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/event' }">事件管理（IMS）</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/event/know' }">事件知识库管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    
    <div class="content">
      <div class="title">数据列表</div>
      <div class="content-mian">
        <el-form ref="formRef" label-width="130" :model="form" :rules="rules" style="width: 100%">
          <el-row>
            <el-col :span="8"> 
              <el-form-item label="事件名称：">
                <span>{{ form.eventName }}</span>
              </el-form-item>
              <el-form-item label="发生地点：">
                <span>{{ form.location }}</span>
              </el-form-item>
              <el-form-item v-if="form.type===1" label="事件负责人：">
                <span >{{ dicFormatter(userList,form.eventHead)}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发生时间：">
                <span>{{ form.eventTime }}</span>
              </el-form-item>
              <el-form-item label="分类：">
                <span v-if="form.type==1">普通事件</span>
                <span v-else>协同事件</span>
              </el-form-item>
              <el-form-item v-if="form.type===1" label="电话：">
                <span >{{ form.headTel }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item v-if="form.type===2" label="航站楼：">
                <span>{{ form.terminal }}</span>
              </el-form-item>
              <el-form-item label="事件类型：">
                <span>{{ form.eventTypeName }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <div>
            <el-form-item v-if="type==='detail' || type==='review'" label="事件状态：">
              <span>{{ dicFormatter(options.eventStatusOption,form.eventState) }}</span>
            </el-form-item>
            <el-form-item v-else label="事件状态" prop="eventState">
              <el-radio-group v-model="form.eventState">
                <el-radio v-for="item in options.eventStatusOption" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div>
            <el-form-item v-if="type==='detail' || type==='review'" label="问题原因：">
              <span>{{ form.reason }}</span>
            </el-form-item>
            <el-form-item v-else label="问题原因：" prop="reason">
              <el-input type="textarea" :rows="3" maxlength="200" show-word-limit placeholder="请输入" v-model="form.reason"></el-input>
            </el-form-item>
            <!-- 只要状态是驳回不管是详情还是操作都可以看到驳回原因 -->
            <el-form-item v-if="status === '42' " label="审核意见：">
              <span>{{ form.approvalDesc }}</span>
            </el-form-item>
          </div>
          <div>
            <el-form-item v-if="type==='detail' || type==='review'" label="反馈说明：">
              <span>{{ form.description }}</span>
            </el-form-item>
            <el-form-item  v-else label="反馈说明：" prop="description">
              <el-input  type="textarea" :rows="3" maxlength="200"  show-word-limit placeholder="请输入" v-model="form.description">
              </el-input>
            </el-form-item>
            <el-form-item label="附件：" prop="files" class="all_row">
              <!-- <HyUpload :file-list="form.files" :disabled="type==='detail'|| type==='review'"/> -->
              <upload-files
                :disabled="type==='detail'|| type==='review'"
                v-model="form.files"
                :accept="['jpg', 'jpeg', 'png','gif', 'bmp' ,'svg','doc','docx','xls','xlsx','pdf']"
              />
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="btn">
        <div v-if="type==='detail'">
          <el-button @click="handleCancel">关闭</el-button>
        </div>
        <div v-if="type==='edit' || type==='submit'">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="editSubmit" :loading="editLoading" :disabled="editLoading">提交</el-button>
        </div>
        <div v-if="type==='review'">
          <el-button @click="handleCancel">取消</el-button>
          <el-button @click="openRejectDia">驳回</el-button>
          <el-button type="primary" @click="passSubmit" :loading="passLoading" :disabled="passLoading">通过</el-button>
        </div>
      </div>
    </div>
  </div>
  
  <edit-dialog tilte="驳回意见" :centerDialogVisible="rejectVisible" width="500" @Cancel="rejectVisible=false" @Submit="rejectSubmit">
      <template #content>
        <el-input
          type="textarea"
          :rows="8"
          maxlength="200"
          show-word-limit
          placeholder="请输入内容"
          v-model="rejectReson">
        </el-input>
      </template>
    </edit-dialog>
</template>

<script lang="ts" setup>
import uploadFiles from "@/components/UploadFiles/index.vue";
// import HyUpload from "@/views/construction/project-application/componens/HyUpload.vue";
import { getDetail,editKnow, review} from '@/api/event/know'
import dicFormatter from '@/hooks/commonUtil'
import EditDialog from "../components/modal.vue";
// import router from '@/router';
import { reactive, ref, computed } from "vue";
import { RouteLocationRaw, useRoute,useRouter } from "vue-router";
import { ElMessage } from 'element-plus'
import {getUserInfo} from "@/api/eqpt/houseManger";
import {useStore} from "vuex";

const userInfo:any =  useStore().getters['user/getUserInfo'];
console.log(userInfo,'dadad')
const router = useRouter();
const route = useRoute();
const { id, type,status } = route.query;

const options:any = reactive({
  eventStatusOption: [
    {
      label: '处置中',
      value: '1'
    },
    {
      label: '已完结',
      value: '2'
    }
  ]
})

const title = computed(()=>{
  if(type==='detail'){
    return '详情'
  }else if(type==='review'){
    return '复核'
  }else if(type==='submit'){
    return '提交'
  }
  return '编辑'
});
const userList=ref([]);
function getUserList(){
  getUserInfo({}).then((res:any)=>{
    userList.value=res.data.map((item:any)=>{
      return {
        value: item.userId,
        label: item.name
      }
    })
  })
}
getUserList();

const formRef = ref();
const form = reactive({
  eventName: '',
  eventTime: '', 
  terminal: '',
  location: '', 
  type: 1,     // 分类
  eventTypeName: '',
  eventHead: undefined, 
  headTel: '',
  eventState: undefined,
  eventType: undefined,
  reason:'',
  description:'',
  approvalDesc:'',
  files: [],
})
// 详情
const detialLoading = ref(false);

function getData(){
  detialLoading.value = true;
  getDetail(id).then((res:any)=>{
    const detailInfo= res.data;
    form.eventName=detailInfo.eventName;
    form.eventTime=detailInfo.eventTime;
    form.terminal = detailInfo.terminal;
    form.location = detailInfo.location;
    form.eventTypeName = detailInfo.eventTypeName;
    form.type = detailInfo.type;
    form.eventHead = detailInfo.eventHead;
    form.headTel = detailInfo.headTel;
    form.eventState = detailInfo.eventState;
    form.reason = detailInfo.reason;
    form.description = detailInfo.description;
    form.approvalDesc = detailInfo.approvalDesc;
    form.files = detailInfo.files;
  }).catch((err:any)=>{
    ElMessage.error(err.message|| '查询失败');
  }).finally(()=>{
    detialLoading.value = false;
  })
}
getData()

const rules = {
  eventState: [
    {required: true, message: '请选择', trigger: ['blur', 'change']}
  ],
  reason: [
    {required: true, message: '请输入', trigger: ['blur', 'change']}
  ],
  desc: [
    {required: true, message: '请输入', trigger: ['blur', 'change']}
  ],
  // eventMeasure:[
  //   {required: true, message: '请输入', trigger: ['blur', 'change']}
  // ],
}


const editLoading= ref(false);
function editSubmit(){
  formRef.value
  .validate()
  .then(async () => {
    editLoading.value = true;

    const { eventState, reason, description, files } = form
    editKnow({
      id,
      eventState,
      reason,
      status: 41,
      description,
      files:files && files.length ? files : undefined,
      submitPerson: userInfo.userId,
      handlePerson: {
        id: userInfo.userId,
        name: userInfo.userName
      }
    }).then((res:any)=>{
      router.go(-1)
    }).catch((err:any)=>{
      ElMessage.error(err.message|| '操作失败');
    }).finally(()=>{
      editLoading.value = false;
    })
  })
   
}
function handleCancel(){
  router.go(-1)
}
// 驳回
const rejectVisible=ref(false);
const rejectReson = ref('');
function openRejectDia() {
  rejectVisible.value=true;
}
// 审核通过
const passLoading=ref(false);
function passSubmit() {
  passLoading.value=true;
  review({
    id,
    status: '43',
    handlePerson: {
      id: userInfo.userId,
      name: userInfo.userName
    }
  }).then(()=>{
     router.go(-1)
  }).catch((err)=>{
    ElMessage.error(err.message|| '操作失败');
  }).finally(()=>{
    passLoading.value= false
  })
}
const rejectLoading=ref(false);
function rejectSubmit(){
  if(!rejectReson.value){
    return ElMessage.error('请输入驳回原因');
  }
  rejectLoading.value=true;
  review({
    id,
    approvalDesc: rejectReson.value,
    status: '42',
    handlePerson: {
      id: userInfo.userId,
      name: userInfo.userName
    }
  }).then(()=>{
    rejectVisible.value=false;
    router.go(-1)
  }).finally(()=>{
    rejectLoading.value=false;
  })
}

</script>

<style lang="less" scoped>
.page {
  padding: 20px 24px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    background-color: #fff;
    margin-top: 20px;
    padding: 28px 24px 58px;
    position: relative;
    .title {
      font-size: 16px;
      color: #353A42;
      padding-bottom: 28px;
    }
    .btn {
      position: absolute;
      bottom: 20px;
      width: 100%;
      text-align: center;
      // padding-bottom: 40px;
    }
  }
}
</style>
